<template>
 <div >
  <div class="ym">
    <img :src="img" alt="" />
    <h4>{{name}}</h4>
    <br />
    <div class="a">
      <span class="count">{{price}}</span><span>折起</span>
      <input type="number" v-model="cnum" >
      <button @click="pay">付款</button>
    </div>
  </div>
 </div>

</template>

<script>
/**
 * vue组件中，props是组件公有属性，对外；data是组件的私有数据，对内。正因为props对外，由外部赋值，因此在组件内部，是只读的，
 * 即组件内部不适宜去改变这些元素的值。当然，改也可以改，但运行时刻会有告警。正如我们写一个函数，对于传入的参数，
 * 我们一般是只读对待的，极少会去修改它的值一样。当然，这只是一种编码约定，你硬是要改，也无话可说，改了就改了。
 */
export default {
    name:'CartItem',
    data:function(){
      return {
        cnum:this.num
      }
    },
    props:{
      id:Number,
      img:String,
      name:String,
      price:Number,
      num:Number
    },
    methods:{
      pay:function(){
        console.log('付款商品数量',this.cnum);
        console.log(this.id,this.cnum);
        // this.$bus 进行了一个触发事件，接受的这个事件的也必须是同一个实例
        this.$bus.$emit('confirmOder',this.id,this.cnum);
      }
    },
    mounted:function(){
      console.log(this)
    }
    
};
</script>

<style>
.shoping {
     margin:0 5%;
 }
 .ym {
     width: 420px;
     height: 285px;
     background-color: #fff;
     margin-bottom: 20px;
     border-radius: 6px;
 }
 img {
     border-radius: 6px 6px 0px 0px;
     width: 420px;
 }
 .count {
     color: #E04F9F;
 }
 h4 {
     margin: 12px 40px -8px 20px;
 }
.a {
    margin-left: 20px;
    color: #7C7F92;
    font-size: 15px;
    padding-bottom: 10px;
    margin-bottom: 10px;
 }

input:-internal-autofill-previewed,input:-internal-autofill-selected {
  -webkit-text-fill-color: #FFFFFF !important;
  transition: background-color 5000s ease-in-out 0s !important;
}
</style>